<template>
  <div class="invite-message">
    <div v-if="invite.type == 1 || invite.type == 3" class="system-msg">
      <a @click="cat(invite.operate_user.id)">{{
        invite.operate_user.nickname
      }}</a>

      <span>{{ invite.type == 1 ? "邀请了" : "将" }}</span>

      <template v-for="(user, uidx) in invite.users">
        <a @click="cat(user.id)">{{ user.nickname }}</a>
        <em v-show="uidx < invite.users.length - 1">、</em>
      </template>

      <span>{{ invite.type == 1 ? "加入了群聊" : "踢出了群聊" }}</span>
    </div>
    <div v-else-if="invite.type == 2" class="system-msg">
      <a @click="cat(invite.operate_user.id)">{{
        invite.operate_user.nickname
      }}</a>

      <span>退出了群聊</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "InviteMessage",
  props: {
    //邀请方式
    invite: {
      type: Object,
      default: {},
    },
  },
  methods: {
    cat(id) {
      this.$emit("cat", id);
    },
  },
};
</script>
<style lang="less" scoped>
.invite-message {
  display: flex;
  justify-content: center;
}

.system-msg {
  margin: 10px auto;
  background-color: #f5f5f5;
  font-size: 11px;
  line-height: 30px;
  padding: 0 8px;
  word-break: break-all;
  word-wrap: break-word;
  color: #979191;
  user-select: none;
  font-weight: 300;
  display: inline-block;

  span {
    margin: 0 5px;
  }

  a {
    color: #939596;
    cursor: pointer;
    font-size: 12px;
    font-weight: 400;

    &:hover {
      color: black;
    }
  }
}
</style>